CSS Style Guide

This page contains the CSS identifiers of common elements of WorkplaceManagement that you may want to apply custom styling to via the Edit Styles tools, or Themes. When applicable, default attributes and values have also been included, along with some examples.

For more help with CSS, you can visit https://www.w3schools.com/css/.

Employee Panels

Main panel

.employeepanel{
}


Employee Image
.PanelPic {
}


Additional Fields
Fields included in panels can be targeted via the convention #f_[fieldname] e.g.

#f_firstname {
}

#f_extension {
}

Employee Panel Examples
Red border:

.employeepanel {
border: 4px solid red;
}
Dark background with a white font:

.employeepanel {
background-color: gray20;
color: white;
}
Increased font size:

.employeepanel {
font-size: 15pt;
}


Desk Panels

Main panel
.deskpanel {
}


Desk Name
#f_deskname {
}

Desk Panel Examples
Green text:

.deskpanel {
color: green;
}


Asset Panels

Main Panel
.assetpanel {
}

Asset Panel Image
.assetpanel img {
}

Asset Panel Examples
Yellow background:

.assetpanel {
background-color: yellow;
}

Interface

Top Toolbar
.ToolbarTransparency {
}

Toolbar Examples
Orange background:

.ToolbarTransparency {
background-color: orange;
}
Hide login link (still clickable):

.LoginButton {
color: #f5f5f5;
}

Asset form with yellow background:

.LoginButton {
#divDetailFormBody[formtype=asset][recmode=live] { background-color:yellow }
}

© Copyright 2024 WorkplaceManagement - All Rights Reserved

How to make your own website - Go now